<template>
    <form :class="['wioc-search-input', active ? 'active' : '']"  @submit.prevent action="javascript:void 0">
        <input type="search" @change="change"  :placeholder="placeholder" v-model.trim="keyword"  ref="searchInput"  @blur="searchGoods" @input="searchGoods" @touchstart="active=true">
        <i></i>
		<button v-if="cancel" @click="submit">
			取消
		</button>
    </form>
</template>

<script>
    export default {
		name: 'wioc-search-input',
		props:{
		    cancel: {
				type: Boolean,
				default: false
			},
            value:{
                type: String
            },
            placeholder:{
                type: String,
                default: "搜索"
            }
		},
        data(){
            return{
                keyword:'',
                active:false,
            }
        },
        created(){
            if(this.value){
                this.keyword = this.value
            }
        },
        watch:{
            value(){
                this.keyword = this.value
            }
        },
        methods:{
            searchGoods (event) {
				this.$emit("input",this.keyword)
            },
            change(){
                this.$emit("change",this.keyword)
            },
			submit(){
				 this.$emit("input",'')
			}
        }
    }
</script>

<style lang="less" scoped>
    .wioc-search-input{
		display: flex;
        position:relative;
		height:.26rem;
        input{
            width: 100%;
            height:.26rem;
            background-color: #ebedf8;
            border-radius: .2rem;
            text-align: center;
            border: none;
			color: #c0c4cc;
            letter-spacing:-0.31px;
            padding-left: 0.3rem;
            transition: all 0.2s;
        }
        i{
            display: inline-block;
            position:absolute;
            top: 50%;
            left: 40%;
            margin-top: 0.02rem;
            transform: translate(-50%,-50%);
            width:0.10rem;
            height:0.10rem;
            line-height: 0.26rem;
            background-image: url();
            background-position: center center ;
            background-size: 100% 100%;
            background-repeat: no-repeat ;
            transition: all 0.2s;
        }
		button{
		   width: 0.34rem;
		   border: none;
		   background-color: #fff;
		   color: #c0c4cc;
		   font-size: 0.13rem;
		   margin-left: 0.1rem;
		}
    }
    .active{
        input{
           text-align: left;
        }
        i{
            left: 0.15rem;
            transform: translateY(-50%);
        }

    }

</style>
